<template>
  <div>
    <div class="wodedingdan">
      <head_><h1>我的订单</h1></head_>
      <div class="dingdan_list">
        <ul v-for="item in list" :key="item.id">
<!--        <ul :key="item.id" @click="go_detail(index)">-->
          <li><img :src="item.car.headPic" alt="" /></li>
          <li>
            <p>
              <span v-text="item.carName"></span>
                <van-button type="info" size="mini" @click="go_detail(item.id)">订单详情</van-button>
            </p>
            <p>日租：{{ item.endTime }}</p>
            <p>租车日期：{{ item.startTime }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  // Vue.prototype.$http=axios
import {myOrder} from '@/request/home/home_http'
 import head_ from "./header";
import Vue from "vue";
import { Toast } from "vant";
import {login} from '../../request/login_register/login_register';
  import xinxi_ from "./dingdanxiangqing/cheliangxinxi";
Vue.use(Toast);
export default {
  props: {},
  data() {
    return {
      // item:{},
      list: [
      ],
      // childlist: null,

    };
  },
   created() {
    this.initTable();
  },
    components: {
        head_,
    },
  methods: {
    go_detail(id){
      this.$router.push({path: '/xiangqing1/' + id});
      // this.$router.push({path: '/xiangqing1/'});
    },
    initTable() {
      var clientId = localStorage.getItem("ms_id")
      this.$http.get("/order/api/getOrders").then(result => {
        console.log(result.data.data[0].car)
        this.list = result.data.data;
        // this.item = result.data.data[0]

      });
      result.data.data.forEach(item =>{
        let start = new Date(item.startTime);
        let end = new Date(item.endTime);
        let date = `${start.getFullYear()}年${start.getMonth()+1}月${start.getDate()}日`;
        this.list.push({
          titl: item.carName,
          id: item.id,
          time: Math.ceil((end-start)/1000/60/60/24),
          day: date
        });

    })
    // methods: {
    //
    //           go_detail(index)
    //   {
    //
    //
    //   }
    //
    },

    mounted() {
      this.$http({
        url: "/order/api/getOrders",
        method: "post",
        data: {
          "clientId": "1"
        },
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        }
      }).then(res => {
        this.childlist = res.data;
        res.data.forEach(item =>{
          let start = new Date(item.start_time);
          let end = new Date(item.end_time);
          let date = `${start.getFullYear()}年${start.getMonth()+1}月${start.getDate()}日`;
          this.list.push({
            titl: item.carName,
            id: item.id,
            time: Math.ceil((end-start)/1000/60/60/24),
            day: date
          });
        })
        console.log(res.data)
        this.list = res.data.data;

      })

    }
  }



};
</script>

<style scoped lang="less">
.wodedingdan {
  width: 100%;
  height: 100%;
  font-size: 0;
  .dingdan_list {
    width: 100%;
    height: 100%;
    background-color: #eeeeee;
    padding: 0.1rem 0;
    ul {
      width: 95%;
      height: 1.8rem;
      background: white;
      margin: 0.2rem auto;
      border-radius: 0.08rem;
      display: flex;
      align-items: center;
      li {
        height: 90%;
      }
      li:nth-child(1) {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 2.2rem;
          height: 1.3rem;
          margin-left: 0.1rem;
        }
      }
      li:nth-child(2) {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        p {
          padding: 0 0.21rem;
        }
        p:nth-child(1) {
          display: flex;
          justify-content: space-between;
          span:nth-child(1) {
            font-weight: 600;
            font-size: 0.28rem;
          }
          span:nth-child(2) {
            color: #999;
            font-size: 0.24rem;
          }
        }
        p:nth-child(2),
        p:nth-child(3) {
          font-size: 0.23rem;
          color: #666;
        }
      }
    }
  }
}
</style>
